<template lang="html">
  <div class="container">
    <!--
      amap-manager： 地图管理对象
      vid：地图容器节点的ID
      zooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]
      center： 地图中心点坐标值
      plugin：地图使用的插件
      events： 事件
    -->
    <el-amap
      class="amap-box"
      :amap-manager="amapManager"
      :vid="'amap-vue'"
      :zoom="zoom"
      :plugin="plugin"
      :center="center"
      :events="events"
      mapStyle="light"
    >
      <!-- 标记 -->
      <el-amap-marker v-for="(marker, index) in markers" :key="marker.carId" :vid="marker.carId"
                      :position="marker.position" icon="car.png" :events="markerEvents"/>
    </el-amap>
  </div>
</template>
<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'

const amapManager = new AMapManager()
export default {
  props: {
    markers: {
      type: Array,
      required: true
    }
  },
  data() {
    // eslint-disable-next-line no-unused-vars
    const self = this
    return {
      marker: [108.909342, 34.218990],
      address: null,
      searchKey: '',
      amapManager,
      //   ,
      //   markers: [
      //   {
      //     carId: 1,
      //     position: [108.909342, 34.218990]
      //   }, {
      //     carId: 2,
      //     position: [108.919342, 34.218990]
      //   }, {
      //     carId: 3,
      //     position: [108.929342, 34.218990]
      //   }
      // ]
      searchOption: {
        city: '全国',
        citylimit: true
      },
      center: [108.909342, 34.218990],
      zoom: 13,
      lng: 0,
      lat: 0,
      loaded: false,
      markerEvents: {
        click(e) {
          console.log(e)
        }
      },
      events: {
        init() {
          lazyAMapApiLoaderInstance.load().then(() => {
            this.map = new AMap.Map('amapContainer', {
              center: new AMap.LngLat(108.909342, 34.218990)
            })
          })
        }
      },
      // 一些工具插件
      plugin: [
        {
          // 工具栏
          pName: 'ToolBar',
          events: {
            init(instance) {
              // console.log(instance);
            }
          }
        },
        {
          // 鹰眼
          pName: 'OverView',
          events: {
            init(instance) {
              // console.log(instance);
            }
          }
        },
        {
          // 地图类型
          pName: 'MapType',
          defaultType: 0,
          events: {
            init(instance) {
              // console.log(instance);
            }
          }
        }
      ]
    }
  },
  methods: {
    test() {
      console.log('test')
    }
  }
}
</script>
<style lang="css">
.container {
  margin-top: 12px;
  width: 100%;
  height: 600px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .05);
  /*position: absolute;*/
  /*left: 50%;*/
  /*top: 50%;*/
  /*transform: translate3d(-50%, -50%, 0);*/
  /*border: 1px solid #999;*/
}

.tip-box {
  width: 100%;
  max-height: 260px;
  position: absolute;
  top: 30px;
  overflow-y: auto;
  background-color: #fff;
}
</style>
